<template>
	<view class="wanlpage-groups" :style="[pageData.style]">
		<view class="wanlpage-groups__mian" :class="[`col-3-${pageData.params.colmargin}`]"
			:style="{ backgroundImage: `url(${$wanlshop.oss( pageData.params.groupsBackground, 0, 50, 1, 'transparent', 'png' )})` }">
			<view class="head">
				<view class="title">
					<text class="margin-right-sm text-bold">
						{{ pageData.params.titleText }}
						<image :src="$wanlshop.oss('/uploads/staticImage/images/default/title.png')" mode="widthFix"></image>
					</text>
					<text :style="{ color: pageData.params.infoColor, fontSize: pageData.params.infoFontSize }">
						{{ pageData.params.infoText }}
					</text>
				</view>
				<view class="text-gray text-sm" @tap="handleGroups">
					<text class="margin-right-xs">更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in data" :key="item.id" @tap="handleGoods(item.id)">
					<image :src="$wanlshop.oss(item.image, 100, 100)" mode="aspectFill"></image>
					<view class="text-cut text-sm">{{item.title}}</view>
					<!-- <view class="text-cut text-red text-xs">{{item.description}}</view> -->
					<view class="flex align-center justify-between margin-top-xs">
						<text class="text-price text-lg text-red">{{item.price}}</text>
						<text class="text-sm wanl-gray text-dec">{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'wanlPagePreferential',
		props: {
			pageData: {
				type: Object,
				default: function() {
					return {
						"name": "限时优惠",
						"type": "groups",
						"style": {
							"background-color": "#ffffff",
							"border-radius": "10px",
							"overflow": "hidden",
							"margin": "12.5px"
						},
						"params": {
							"groupsBackground": "",
							"colmargin": "25",
							"titleText": "限时优惠",
							"titleColor": "#222222",
							"titleFontSize": "14px",
							"infoText": "",
							"infoColor": "#999999",
							"infoFontSize": "34rpx"
						},
						"data": [
							{
								"title": "自动获取商品"
							}
						]
					};
				}
			},
			shopData: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				data: [{
						"id": 3,
						"image": "http://shop.zkxstech.com/uploads/20230507/cfd07786963f0f1685d2339f28da649d.jpg",
						"title": "志高扫地机器人智能洗扫拖一体自动回充 吸尘器ZGS-566",
						"description": "志高扫地机器人智能洗扫拖一体自动回充 吸尘器ZGS-566",
						"price": "1999.00"
					},
					{
						"id": 1,
						"image": "http://shop.zkxstech.com/uploads/20230531/dcf8f50b69ee893698ab5cf30ad0c558.jpg",
						"title": "拼团测试商品1",
						"description": "测试拼团商品",
						"price": "88.00"
					},
					{
						"id": 2,
						"image": "http://shop.zkxstech.com/uploads/20230531/2d1ac115aa638ba9258c9c87e19cc3f9.jpg",
						"title": " 煌上煌酱卤大礼包风味酱鸭大礼盒伴手礼江西特产礼盒装400g(红黄颜色随机发)",
						"description": " 煌上煌酱卤大礼包风味酱鸭大礼盒伴手礼江西特产礼盒装400g(红黄颜色随机发)",
						"price": "79.00"
					}
				]
			};
		},
		created() {
			// this.loadData();
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/wanlshop/page/groups',
					data: {
						shop_id: this.shopData ? this.shopData.id : 0
					},
					success: res => {
						this.data = res.data;
					}
				});
			},
			handleGoods(id) {
				this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`);
			},
			handleGroups() {
				this.$wanlshop.to(`/pages/apps/groups/index`);
			}
		}
	};
</script>

<style lang="scss">
	.wanlpage-groups {
		&__mian {
			background-repeat: no-repeat;
			background-size: 100% auto;

			&.col-3-10 {
				.head {
					padding: 0 10rpx;
				}

				.list {
					padding: 0 10rpx;

					.item {
						width: calc((100% - 20rpx) / 3);
						margin-bottom: 10rpx;
					}
				}
			}

			&.col-3-15 {
				.head {
					padding: 0 15rpx;
				}

				.list {
					padding: 0 15rpx;

					.item {
						width: calc((100% - 30rpx) / 3);
						margin-bottom: 15rpx;
					}
				}
			}

			&.col-3-20 {
				.head {
					padding: 0 20rpx;
				}

				.list {
					padding: 0 20rpx;

					.item {
						width: calc((100% - 40rpx) / 3);
						margin-bottom: 20rpx;
					}
				}
			}

			&.col-3-25 {
				.head {
					padding: 0 25rpx;
				}

				.list {
					padding: 0 25rpx;

					.item {
						width: calc((100% - 50rpx) / 3);
						margin-bottom: 25rpx;
					}
				}
			}

			&.col-3-30 {
				.head {
					padding: 0 30rpx;
				}

				.list {
					padding: 0 30rpx;

					.item {
						width: calc((100% - 60rpx) / 3);
						margin-bottom: 30rpx;
					}
				}
			}

			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 85rpx;

				.title {
					display: flex;
					align-items: center;
					text {
						position: relative;
						&:nth-child(1) {
							font-size: 34rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #222222;
							line-height: 40rpx;
						}
						image {
							position: absolute;
							width: 200rpx;
							bottom: -6rpx;
							left: 20rpx;
						}
					}
				}
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				&::after {
					content: '';
					display: block;
					width: 33%;
					visibility: hidden;
				}

				.item {
					flex-wrap: wrap;

					image {
						height: 200rpx;
						margin-bottom: 6rpx;
						border-radius: 18rpx;
						overflow: hidden;
						background-color: #f9f9f9;
					}
				}
			}
		}
	}
</style>